<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏州旅行助手 - 地图版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: #f0f9ff;
            overflow-x: hidden;
        }
        
        .map-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
            overflow: hidden;
        }
        
        .map-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
        }
        
        .location-marker {
            position: absolute;
            width: 40px;
            height: 40px;
            background: white;
            border: 3px solid #0ea5e9;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            color: #0ea5e9;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .location-marker:hover {
            transform: scale(1.2);
            box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
        }
        
        .location-marker.current {
            background: #10b981;
            border-color: #059669;
            color: white;
            animation: pulse 2s infinite;
        }
        
        .location-marker.completed {
            background: #6b7280;
            border-color: #4b5563;
            color: white;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .info-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            z-index: 20;
        }
        
        .header {
            text-align: center;
            margin-bottom: 16px;
        }
        
        .title {
            font-size: 20px;
            font-weight: bold;
            color: #0ea5e9;
            margin-bottom: 4px;
        }
        
        .subtitle {
            font-size: 12px;
            color: #6b7280;
        }
        
        .current-info {
            background: #f0f9ff;
            border: 1px solid #0ea5e9;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
        }
        
        .current-title {
            font-size: 14px;
            font-weight: 600;
            color: #0369a1;
            margin-bottom: 4px;
        }
        
        .current-desc {
            font-size: 12px;
            color: #0284c7;
        }
        
        .weather-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fef3c7;
            border: 1px solid #f59e0b;
            border-radius: 8px;
            padding: 8px 12px;
        }
        
        .weather-temp {
            font-size: 18px;
            font-weight: bold;
            color: #92400e;
        }
        
        .weather-desc {
            font-size: 12px;
            color: #a16207;
        }
        
        .timeline {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            z-index: 20;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .timeline-title {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 12px;
            text-align: center;
        }
        
        .timeline-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .timeline-item:last-child {
            border-bottom: none;
        }
        
        .timeline-time {
            font-size: 12px;
            font-weight: 600;
            color: #6b7280;
            width: 50px;
            flex-shrink: 0;
        }
        
        .timeline-content {
            flex: 1;
            margin-left: 12px;
        }
        
        .timeline-title-text {
            font-size: 13px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 2px;
        }
        
        .timeline-desc {
            font-size: 11px;
            color: #6b7280;
        }
        
        .timeline-item.current .timeline-time {
            color: #0ea5e9;
        }
        
        .timeline-item.current .timeline-title-text {
            color: #0ea5e9;
        }
        
        .timeline-item.completed .timeline-time {
            color: #6b7280;
        }
        
        .timeline-item.completed .timeline-title-text {
            color: #6b7280;
        }
        
        .route-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, #0ea5e9, #10b981);
            z-index: 5;
            opacity: 0.6;
        }
        
        .controls {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 30;
        }
        
        .control-btn {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            margin-bottom: 8px;
            transition: all 0.3s ease;
        }
        
        .control-btn:hover {
            transform: scale(1.1);
            background: white;
        }
    </style>
</head>
<body>
    <div class="map-container">
        <!-- 地图背景 -->
        <div class="map-overlay"></div>
        
        <!-- 地点标记 -->
        <div class="location-marker" style="top: 15%; left: 25%;" data-location="苏州站" data-time="14:01">
            1
        </div>
        <div class="location-marker" style="top: 20%; left: 35%;" data-location="宜必思酒店" data-time="14:30">
            2
        </div>
        <div class="location-marker" style="top: 25%; left: 40%;" data-location="伟记面馆" data-time="16:40">
            3
        </div>
        <div class="location-marker current" style="top: 30%; left: 45%;" data-location="拙政园" data-time="17:10">
            4
        </div>
        <div class="location-marker" style="top: 35%; left: 50%;" data-location="平江路" data-time="18:50">
            5
        </div>
        <div class="location-marker" style="top: 20%; left: 35%;" data-location="宜必思酒店" data-time="21:00">
            6
        </div>
        <div class="location-marker" style="top: 60%; left: 20%;" data-location="旺山生态园" data-time="08:30">
            7
        </div>
        <div class="location-marker" style="top: 15%; left: 25%;" data-location="苏州站" data-time="20:09">
            8
        </div>
        
        <!-- 路线连接线 -->
        <div class="route-line" style="top: 17%; left: 27%; width: 8%; transform: rotate(15deg);"></div>
        <div class="route-line" style="top: 22%; left: 37%; width: 3%; transform: rotate(45deg);"></div>
        <div class="route-line" style="top: 27%; left: 42%; width: 3%; transform: rotate(45deg);"></div>
        <div class="route-line" style="top: 32%; left: 47%; width: 3%; transform: rotate(45deg);"></div>
        <div class="route-line" style="top: 37%; left: 52%; width: 3%; transform: rotate(45deg);"></div>
        
        <!-- 信息面板 -->
        <div class="info-panel">
            <div class="header">
                <div class="title">🗺️ 苏州旅行助手</div>
                <div class="subtitle">地图版 · 实时行程跟踪</div>
            </div>
            
            <div class="current-info">
                <div class="current-title">📍 当前行程</div>
                <div class="current-desc">17:10 拙政园游览 - 苏州最著名的古典园林</div>
            </div>
            
            <div class="weather-info">
                <div>
                    <div class="weather-temp">☀️ 22°C</div>
                    <div class="weather-desc">苏州 · 晴</div>
                </div>
                <div style="text-align: right;">
                    <div style="font-size: 11px; color: #a16207;">建议穿轻薄衣物</div>
                    <div style="font-size: 10px; color: #a16207;">注意防晒</div>
                </div>
            </div>
        </div>
        
        <!-- 控制按钮 -->
        <div class="controls">
            <button class="control-btn" onclick="refreshLocation()" title="刷新位置">📍</button>
            <button class="control-btn" onclick="toggleTimeline()" title="切换时间轴">📅</button>
            <button class="control-btn" onclick="refreshWeather()" title="刷新天气">🌤️</button>
        </div>
        
        <!-- 时间轴 -->
        <div class="timeline" id="timeline">
            <div class="timeline-title">📅 行程时间轴</div>
            
            <div class="timeline-item completed">
                <div class="timeline-time">14:01</div>
                <div class="timeline-content">
                    <div class="timeline-title-text">高铁抵达苏州</div>
                    <div class="timeline-desc">苏州站</div>
                </div>
            </div>
            
            <div class="timeline-item completed">
                <div class="timeline-time">14:30</div>
                <div class="timeline-content">
                    <div class="timeline-title-text">宜必思酒店放行李</div>
                    <div class="timeline-desc">乐桥店</div>
                </div>
            </div>
            
            <div class="timeline-item completed">
                <div class="timeline-time">16:40</div>
                <div class="timeline-content">
                    <div class="timeline-title-text">伟记吃面</div>
                    <div class="timeline-desc">品尝苏州特色面条</div>
                </div>
            </div>
            
            <div class="timeline-item current">
                <div class="timeline-time">17:10</div>
                <div class="timeline-content">
                    <div class="timeline-title-text">拙政园游览</div>
                    <div class="timeline-desc">苏州最著名的古典园林</div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-time">18:50</div>
                <div class="timeline-content">
                    <div class="timeline-title-text">平江路夜游</div>
                    <div class="timeline-desc">历史文化街区</div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-time">21:00</div>
                <div class="timeline-content">
                    <div class="timeline-title-text">返回酒店休息</div>
                    <div class="timeline-desc">宜必思酒店</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 地点信息数据
        const locations = {
            '苏州站': { time: '14:01', desc: '乘坐高铁抵达苏州站' },
            '宜必思酒店': { time: '14:30', desc: '乐桥店放行李' },
            '伟记面馆': { time: '16:40', desc: '品尝苏州特色面条' },
            '拙政园': { time: '17:10', desc: '苏州最著名的古典园林' },
            '平江路': { time: '18:50', desc: '历史文化街区夜游' },
            '旺山生态园': { time: '08:30', desc: '8公里徒步环线' }
        };
        
        // 当前时间
        function updateCurrentTime() {
            const now = new Date();
            const timeStr = now.toLocaleTimeString('zh-CN', { 
                hour: '2-digit', 
                minute: '2-digit' 
            });
            
            // 更新当前行程
            const currentItem = document.querySelector('.timeline-item.current');
            if (currentItem) {
                const timeElement = currentItem.querySelector('.timeline-time');
                if (timeElement) {
                    timeElement.textContent = timeStr;
                }
            }
        }
        
        // 地点标记点击事件
        document.querySelectorAll('.location-marker').forEach(marker => {
            marker.addEventListener('click', function() {
                const location = this.getAttribute('data-location');
                const time = this.getAttribute('data-time');
                const info = locations[location];
                
                if (info) {
                    alert(`${location}\n时间: ${time}\n描述: ${info.desc}`);
                }
            });
        });
        
        // 控制按钮功能
        function refreshLocation() {
            alert('📍 正在获取当前位置...\n（需要允许位置权限）');
        }
        
        function toggleTimeline() {
            const timeline = document.getElementById('timeline');
            timeline.style.display = timeline.style.display === 'none' ? 'block' : 'none';
        }
        
        function refreshWeather() {
            alert('🌤️ 正在刷新天气信息...\n苏州: 22°C 晴');
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🗺️ 苏州旅行助手地图版已加载！');
            
            // 更新当前时间
            updateCurrentTime();
            setInterval(updateCurrentTime, 1000);
            
            // 添加地图交互效果
            const mapContainer = document.querySelector('.map-container');
            mapContainer.addEventListener('mousemove', function(e) {
                const x = e.clientX / window.innerWidth;
                const y = e.clientY / window.innerHeight;
                
                const overlay = document.querySelector('.map-overlay');
                overlay.style.background = `
                    radial-gradient(circle at ${x * 100}% ${y * 100}%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%)
                `;
            });
        });
    </script>
</body>
</html>
